<template>
	<div class="footer">
		<div class="main">
			重庆城市科技学院帅逼罗&copy;版权所有&ensp;技术支持&VeryThinSpace;2024-9-30
		</div>
	</div>
</template>

<script >

	export default {
	  name: 'Footer'  // 指定组件名称
	}

</script>

<style scoped>
/* 底部栏样式 */
.footer {
    position: fixed;   /* 固定位置，保证底部栏始终在页面底部 */
    left: 0;          /* 左对齐 */
    bottom: 0;        /* 和底部对齐 */
    height: 3vh;     /* 高度为视口高度的10% */
    width: 100%;      /* 宽度100%，全屏 */
    background-color: black; /* 背景颜色为黑色 */
    color: white;     /* 文字颜色为白色，提高可读性 */
    padding: 20px;    /* 为容器内添加一些内边距 */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5); /* 添加阴影增加层次感 */
    display: flex;    /* 使用flexbox布局 */
    align-items: center; /* 垂直居中内容 */
    justify-content: center; /* 水平居中内容 */
}

/* 针对小屏幕的响应式调整 */
@media (max-width: 768px) {
    .footer {
        height: 15vh; /* 小屏幕时增加高度以容纳更多内容 */
        padding: 10px; /* 减少边距 */
    }
}

	
	.footer>.main {
		height: 10vh;
		line-height: 10vh;
		color: mistyrose;
		text-align: center;
		font-size: 1vw;
	}
</style>